<template>
    <div class="defGraphWrap" :class="`defGraphWrap-${absolute ? 'absolute' : ''}`">
        <div class="defGraph" :style="{ 'background-image': `url(${noDataImage})` }"></div>
        <div class="graphText" v-show="loading">
            <!-- <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon> -->
            <span>加载中...</span>
        </div>
        <div class="graphText" v-show="!loading">
            <slot v-if="$slots.default"></slot>
            <span v-else>{{ noDataText }}</span>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    name: 'NoData',
    props: {
        noDataText: {
            type: String,
            default: '暂无数据'
        },
        loading: {
            type: Boolean,
            default: false
        },
        absolute: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        ...mapState('style', {
            noDataImage: ({ themeConfig }) => {
                return themeConfig.noDataImage;
            },
        }),
    },
    watch: {},
    mounted() {}
};
</script>
<style scoped>
.defGraphWrap {
    /* position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; */
    min-height: 180px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.defGraphWrap-absolute {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.defGraph {
    height: 126px;
    width: 157px;
    background: url("./defGraph.png") no-repeat center center;
    background-size: 157px 126px;
}

.graphText {
    max-width: 80%;
    word-break: break-all;
    text-align: center;
    color: var(--default-color-level2);
}

.demo-spin-icon-load {
    margin-right: 10px;
    color: #888;
    animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
    from {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    to {
        transform: rotate(360deg);
    }
}
</style>
